<!DOCTYPE html>
<html class="x-admin-sm">
    
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
        <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/xadmin.js"></script>
    </head>
    <body>
        <div class="layui-fluid">
            <div class="layui-row">
                <form class="layui-form">
                    <div class="layui-form-item">
                        <label for="bookName" class="layui-form-label">
                            <span class="x-red">*</span>图书名称</label>
                        <div class="layui-input-inline">
                            <input type="text" id="bookName" name="bookName" required="" lay-verify="required" autocomplete="off" class="layui-input"></div>
                        <div class="layui-form-mid layui-word-aux"></div></div>
                    <div class="layui-form-item">
                        <label for="authorName" class="layui-form-label">
                            <span class="x-red">*</span>作者</label>
                        <div class="layui-input-inline">
                            <input type="text" id="authorName" name="authorName" required="" autocomplete="off" class="layui-input"></div>
                    </div>
                    <div class="layui-form-item">
                        <label for="price" class="layui-form-label">
                            <span class="x-red">*</span>价格</label>
                        <div class="layui-input-inline">
                            <input type="text" id="price" name="pass" required="" autocomplete="off" class="layui-input"></div></div>
                    <div class="layui-form-item">
                        <label for="categoryId" class="layui-form-label">
                            <span class="x-red">*</span>图书分类</label>
                        <div class="layui-input-inline">
							<select name="categoryId" lay-verify="required" id="selectId"></select>
						</div>
                    </div>
                    <div class="layui-form-item">
                        <label for="L_repass" class="layui-form-label"></label>
                        <button class="layui-btn" lay-filter="add" lay-submit="">添加图书</button></div>
                </form>
            </div>
        </div>
		
		<script>
			
			layui.use(['form','jquery'],function(){			
				var form = layui.form;		//获取form对象 
				var $ = layui.jquery;		//获取jQuery对象 

			//通过AJAX获取后台数据
			$.getJSON("http://localhost:8081/getCategoryList",function(d){	
					var list = d.data;		//获取数据列表 
					var str="";
					for (var i = 0; i < list.length; i++) {
						str+="<option value=\""+list[i].categoryId+"\">"+list[i].categoryName+"</option>";
						$("#selectId").html(str); 	//将拼接好的字符串添加到指定位置
						form.render();  //重新渲染form表单
					}					
				});
				
				//监听事件				
				form.on('submit(add)', function(data){
				  $.ajax({	//将获取到表单通过AJAX提交到后台
					  type:'post',
					  url:'http://localhost:8081/addBook',
					  data:JSON.stringify(data.field),
					  contentType:"application/json;charset=utf-8",
					  success:function(e){
							// 获得frame索引
							var index = parent.layer.getFrameIndex(window.name);
							//关闭当前frame
							parent.layer.close(index);
							//修改成功后刷新父界面
							window.parent.location.reload();
						},
						dataType:"json"
				  });
				  
				  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
				});
			});
		
		</script>
	
    </body>
<script>
   var _hmt = _hmt || [];
   (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
   })();
  </script>
</html>